<template>
	<view class="container">
		<fu-navbar title="巡检记录" bgColor="#0f68f0" color="#fff" isBackText></fu-navbar>
		<view class="fixTop">
			<view class="tab-box border-b">
				<view class="tab" :class="{'tab-active': current == 0}" @click="tabChange(0)">已完工</view>
				<view class="tab" :class="{'tab-active': current == 1}" @click="tabChange(1)">已作废</view>
			</view>
			<view class="bg-f flex align-center border-b-c9 select-box justify-between">
				<!-- <view class="item flex align-center justify-between" @click="navTo(`/pages/service/select-device/index?type=xunjian`)">
					<text style="color: #959595;" class="text-ellipsis" v-if="emName">{{emName}}</text>
					<text style="color: #959595;" v-else>选择设备</text>
					<image src="../../../static/images/close.png" class="close" v-if="emName" @click.stop="onClose"></image>
					<image src="../../../static/images/arrow-b-1.png" class="arrow-b" mode="widthFix" v-else></image>
				</view> -->
				<view class="item flex align-center justify-between margin-r-12" @click="toggleTab('area')">
					<text style="color: #959595;" class="text-ellipsis" v-if="areaValue">{{areaName}}</text>
					<text style="color: #959595;" v-else>区域</text>
					<image src="../../../static/images/close.png" class="close" v-if="areaValue" @click.stop="onClose('areaValue')">
					</image>
					<image src="../../../static/images/arrow-b-1.png" class="arrow-b" mode="widthFix" v-else></image>
				</view>
				<view class="item flex align-center justify-between margin-r-12" @click="toggleTab('system')">
					<text style="color: #959595;" class="text-ellipsis" v-if="systemValue">{{systemName}}</text>
					<text style="color: #959595;" v-else>系统</text>
					<image src="../../../static/images/close.png" class="close" v-if="systemValue" @click.stop="onClose('systemValue')">
					</image>
					<image src="../../../static/images/arrow-b-1.png" class="arrow-b" mode="widthFix" v-else></image>
				</view>
				<view class="item flex align-center justify-between" @click="toggleTab('subsystem')">
					<text style="color: #959595;" class="text-ellipsis" v-if="subsystemValue">{{subsystemName}}</text>
					<text style="color: #959595;" v-else>子系统</text>
					<image src="../../../static/images/close.png" class="close" v-if="subsystemValue" @click.stop="onClose('subsystemValue')">
					</image>
					<image src="../../../static/images/arrow-b-1.png" class="arrow-b" mode="widthFix" v-else></image>
				</view>
		</view>
		
			
			<!-- <view class="flex align-center justify-between select-box" @click="toggleTab('docu')">
				<view style="color: #959595;" v-if="!areaValue">区域</view>
				<view style="color: #959595;" v-else>{{areaName}}</view>
				<image src="../../../static/images/close.png" class="close" v-if="areaValue" @click.stop="onClose('area')"></image>
				<image src="../../../static/images/arrow-b-1.png" class="arrow-b" v-else mode="widthFix"></image>
			</view> -->
		</view>
		
		<view style="margin-top: 200rpx;"></view>
		<view class="padding-24 fs-28">共计{{total}}条记录</view>
		<view class="list">
			<view class="item margin-b-24" @click="navTo(`/pages/inspection/inspec-detail/index?id=${item.id}`)"
				v-for="(item, index) in list" :key="index">
				<view class="info">巡检计划：{{item.code}}</view>
				<view class="info">巡检设备：{{item.emName}}</view>
				<view class="info">业务类型：{{item.businessType == 1 ? '日巡检' : item.businessType == 2 ? '周巡检' : '月巡检'}}
				</view>
				<view class="info">巡检区域：{{item.treeAreaName}}</view>
				<view class="info">巡检子系统：{{item.treeName}}</view>
				<view style="width: 100%;height: 1rpx; background-color: #b3b3b3;margin-top: 12rpx;"></view>
				<view class="flex align-center justify-between padding-tb-24">
					<text>{{item.patrolEmployee}}</text>
					<text>{{item.endTime}}</text>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" v-if="list.length > 5"></uni-load-more>

		<!-- 空数据显示 -->
		<fu-empty-ui v-if="list.length == 0 && isInit"></fu-empty-ui>

		<!-- 选择天数 -->
		<w-picker mode="selector" :options="days" themeColor="#30a3e0" @confirm="onConfirm($event, 'selector')"
			ref="selector"></w-picker>

		<w-picker mode="selector" :options="areaOptions" themeColor="#30a3e0" :defaultProps="typeProps"
			default-type="name" @confirm="onConfirm($event, 'area')" ref="area"></w-picker>
			<w-picker mode="selector" :options="systemOptions" themeColor="#30a3e0" :defaultProps="typeProps"
				default-type="name" @confirm="onConfirm($event, 'system')" ref="system"></w-picker>
				<w-picker mode="selector" :options="subsystemOptions" themeColor="#30a3e0" :defaultProps="typeProps"
					default-type="name" @confirm="onConfirm($event, 'subsystem')" ref="subsystem"></w-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				day: '7天',
				days: [{
						label: '7天'
					},
					{
						label: '14天'
					},
					{
						label: '30天'
					}
				],
				emName: '',
				list: [],
				isInit: false,
				page: 1,
				status: 'more',
				total: 0,
				current: 0,
				state: 5,
				areaValue: '',
				areaName: '',
				areaOptions: [],
				systemValue: '',
				systemName: '',
				systemOptions: [],
				subsystemValue: '',
				subsystemName: '',
				subsystemOptions: [],
				typeProps: {
					value: 'id',
					label: 'name'
				},
			}
		},
		onLoad() {
			uni.$on('getDevice', data => {
				this.emName = data.emName
				this.status = 'more';
				this.page = 1;
				this.getList();
			})
			this.getAreaOptionFn(0, "areaOptions")
		},
		onShow() {
			this.getList();
		},
		onPullDownRefresh() {
			this.status = 'more';
			this.page = 1;
			this.getList();
		},
		onReachBottom() {
			if (this.status == 'more') {
				this.getList();
			}
		},
		onUnload() {
			uni.$off('getDevice')
		},
		methods: {
			getAreaOptionFn(val,typeOptions) {
				this.$api.post(global.apiUrls.selectEquipmentTreeGroupNoEquipment, {
					id: val
				}).then((res => {
					if (res.data.code === 9100) {
						this[typeOptions] = res.data.info
					}

				}))
			},
			navTo(path) {
				uni.navigateTo({
					url: path
				})
			},
			tabChange(e) {
				this.current = e
				if (e == 0) {
					this.state = 5
				} else {
					this.state = -1
				}
				this.status = 'more';
				this.page = 1;
				this.getList();
			},
			onClose(value) {
				this[value] = ''
				this.status = 'more';
				this.page = 1;
				this.getList();
			},
			toggleTab(ref) {
				if(ref==='system' && !this.areaValue){
					uni.showToast({
					    title: '请先选择区域',
					    icon: 'none',
					})
					return
				}
				if(ref==='subsystem' && !this.systemValue){
					uni.showToast({
					    title: '请先选择系统',
					    icon: 'none',
					})
					return
				}
				if(ref==='system') this.getAreaOptionFn(this.areaValue,"systemOptions")
				if(ref==='subsystem') this.getAreaOptionFn(this.systemValue,"subsystemOptions")
				this.$refs[ref].show();
			},
			onConfirm(e, type) {
				if (type === "area") {
					this.areaValue = e.value
					this.areaName = e.result
				} else if(type ==="system"){
					this.systemValue = e.value
					this.systemName = e.result
				} else if (type ==="subsystem"){
					this.subsystemValue = e.value
					this.subsystemName = e.result
				} else {
					this.day = e.result
				}
				this.status = 'more';
				this.page = 1;
				this.getList()
			},
			getList() {
				if (this.status != 'more') return;
				this.status = 'loading';
				this.$api.post(global.apiUrls.selectPatrolApp, {
					pageNum: this.page,
					pageSize: 10,
					emName: this.emName,
					state: this.state,
					treeId: this.subsystemValue || this.systemValue || this.areaValue || undefined
				}).then(res => {
					if (res.data.code == 9100) {
						let total = res.data.info.total
						this.total = total
						let data = res.data.info.rows
						if (this.page == 1) this.list = [];
						this.list = this.list.concat(data)
						if (this.list.length < total) {
							this.status = 'more';
							this.page++;
						} else {
							this.status = 'noMore';
						}
					}
					this.isInit = true;
					uni.stopPullDownRefresh();
				}).catch(() => {
					uni.stopPullDownRefresh();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f3f5f8;
	}
	
	.fixTop{
		position: fixed;
		width: 100%;
		top: 150rpx;
		z-index: 99;
	}

	.tab-box {
		background-color: #fff;
		display: flex;
		align-items: center;
		height: 100rpx;
		position: sticky;
		z-index: 99;

		.tab {
			flex: 1;
			text-align: center;
			line-height: 100rpx;
			color: #7f7f7f;
			position: relative;
		}

		.tab-active {
			color: #333;

			&::after {
				content: '';
				position: absolute;
				width: 90rpx;
				height: 6rpx;
				background-color: #555;
				border-radius: 2rpx;
				bottom: 0;
				left: 0;
				right: 0;
				margin: 0 auto;
			}
		}
	}

	.select-box {
		height: 100rpx;
		padding: 0 40rpx;

		.item {
			width: 300rpx;
			height: 52rpx;
			border-radius: 18rpx;
			background-color: #d7d7d7;
			font-size: 28rpx;
			box-sizing: border-box;
			padding: 0 16rpx;

			.arrow-b {
				width: 26rpx;
			}

			.close {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.list {
		.item {
			background-color: #fff;
			padding: 24rpx 32rpx 0;
			border-radius: 20rpx;
			font-size: 28rpx;

			.info {
				line-height: 1.8;
			}
		}
	}
</style>